<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>FBX模型加载</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
        }

        .tccDraw {
            width: 100%;
            height: 800px;
        }
    </style>
    <script src="js/three.js"></script>
    <script src="js/OrbitControls.js"></script>
    <script src="js/stats.min.js"></script>
    <script src="js/FBXLoader.js"></script>
    <script src="js/fflate.min.js"></script>
</head>

<body>
    <div id="tccDraw" class="tccDraw">
    </div>
    <script>
        let scene, camera, renderer, labelRenderer, controls, showDiv, directionalLight, mesh, stats;
        var clock = new THREE.Clock();
        var mixers;
        /* 场景 */
        function initScene() {
            showDiv = document.getElementById("tccDraw");
            scene = new THREE.Scene();
            let axesHelper = new THREE.AxesHelper(500);
            scene.add(axesHelper);
        }
        /* 相机 */
        function initCamera() {
            //透视相机
            camera = new THREE.PerspectiveCamera(45, showDiv.clientWidth / showDiv.clientHeight, 10, 15000);
            camera.position.set(0, 500, 350);
            camera.lookAt(new THREE.Vector3(0, 0, 0));
        }

        /* 渲染器 */
        function initRender() {
            renderer = new THREE.WebGLRenderer({
                antialias: true
            });
            renderer.setSize(showDiv.clientWidth, showDiv.clientHeight);
            showDiv.appendChild(renderer.domElement);
        }

        /* 灯光 */
        function initLight() {
            let ambientLight = new THREE.AmbientLight(0xCCCCCC);
            scene.add(ambientLight);
            directionalLight = new THREE.DirectionalLight(0x585858);
            directionalLight.position.set(0, 3500, 0);
            scene.add(directionalLight);
        }

        /* 控制器 */
        function initControls() {
            controls = new THREE.OrbitControls(camera, showDiv);
        }
        /* 初始化性能插件status */
        function initStats() {
            stats = new Stats();
            document.body.appendChild(stats.dom);
        }
        /*添加FBX模型*/
        function addFBX() {
            var loader = new THREE.FBXLoader();
            loader.load('models/fbx/Samba Dancing.fbx', function (object) {
                //动画
                mixers = new THREE.AnimationMixer(object);
                var action = mixers.clipAction(object.animations[0]);
                action.play();
                object.traverse(function (child) {
                    if (child.isMesh) {
                        child.castShadow = true;
                        child.receiveShadow = true;
                    }
                });
                //缩放
                object.scale.set(0.5, 0.5, 0.5);
                //位置
                object.position.set(0, 0, 0);
                scene.add(object);
            });
        }

        /*创建平面*/
        function addPlane() {
            //实心
            var planeGeo2 = new THREE.PlaneGeometry(1600, 1600);
            var planeTexture = new THREE.TextureLoader().load("models/cerberus/Cerberus_RM.jpg");
            planeGeo2.translate(0,0,-400);
            var mesh2 = new THREE.MeshBasicMaterial({
                map:planeTexture
            });
            mesh2.side = THREE.DoubleSide;
            var plane2 = new THREE.Mesh(planeGeo2, mesh2);
            plane2.position.set(100,100,100);
            scene.add(plane2);
        }
        initScene();
        initCamera();
        initLight();
        initControls();
        initRender();
        initStats();
        addFBX();
        addPlane();
        animate();
        /* 循环渲染 */
        function animate() {
            requestAnimationFrame(animate);
            const delta = clock.getDelta();
            if (mixers) mixers.update(delta);
            controls.update();
            stats.update();
            renderer.render(scene, camera);
        }
    </script>
</body>

</html>